/**
 * 首页跳转、购物车跳转
 */
function backToIndexOrCart() {
    $('.logo').on('click', function () {
        location.href = "./index.html"
    })
    $('#nav-top li').on('click',function(){
        location.href = "./index.html"
    })
    $('.icon-gouwuche').click(function(){
        location.href='./cart.html'
    })
}

/**
 * 获取商品列表数据id
 */
function getProductId() {
    let url = location.href
    let index = url.indexOf('?')
    let subUrl = url.substring(index + 1)
    let id = subUrl.split('=')[1]
    return id
}


/**
 * 获取商品详情数据
 */
function loadProduct() {
    let id = getProductId()
    $.ajax({
        url: "http://www.xiongmaoyouxuan.com/api/detail",
        type: "GET",
        dataType: 'json',
        data: {
            id: id,
            normal: 1,
            sa: ""
        },
        success: function (result) {
            // console.log(result);
            if (result.code == 200) {
                // console.log('请求成功');
                let goods = result.data.detail
                let shangjia = result.data.shop
                showProductDetail(goods, shangjia)
                
            } else {
                console.log('获取数据失败');
            }
        },
    });
}

/**
 * 商品详情页面渲染
 */
function showProductDetail(goods, shangjia) {
    let data = {
        goods,
        shangjia
    }
    let htmlstr = template('shoppinginfo', data);
    $('#mainPart').html(htmlstr);

    onBigGlass(goods, shangjia)
    onTabGlass(goods, shangjia)

}




/**
 * 放大镜
 *     遮罩层mask          放大镜 .right
 * ----------------   =  --------------------
 *  显示图片showbox        放大镜里的大图
 */

//放大镜功能：
// 移入显示遮罩层，移出隐藏遮罩层；移动遮罩层等比例放大；
function onBigGlass(goods, shangjia) {
    // 移入显示遮罩层
    $('.show-box').mouseover(function () {
        $(".mask").show()
        $('.right').show()

    })
    // 移出隐藏遮罩层
    $('.show-box').mouseout(function () {
        $(".mask").hide()
        $('.right').hide()

    })
    // --移动遮罩层
    $('.show-box').mousemove(function (e) {
        e = e || window.event
        let x = e.offsetX - ($(".mask").width()) / 2
        let y = e.offsetY - ($(".mask").height()) / 2

        if (x < 0) x = 0
        if (x > $('.show-box').width() - $(".mask").width())
            x = $('.show-box').width() - $(".mask").width()
        if (y < 0) y = 0
        if (y > $('.show-box').height() - $(".mask").height())
            y = $('.show-box').height() - $(".mask").height()

        $(".mask").css({
            left: x + 'px',
            top: y + 'px'
        })

        // --放大镜

        // ------放大镜里的大图的尺寸
        /**
         * 放大镜
         *     遮罩层mask          放大镜 .right
         * ----------------   =  --------------------
         *  显示图片showbox        放大镜里的大图
         */
        $('.right>img').width(($('.right').width() * $('.show-box').width()) / $('.mask').width())
        $('.right>img').height(($('.right').height() * $('.show-box').height()) / $('.mask').height())
        // ------放大镜里的大图移动距离
        /**
          遮罩层移动距离        遮罩层
         ------------   =  ------------
          背景图片移动距离      放大镜

          背景图片移动距离 =  遮罩层移动距离*放大镜/遮罩层
        **/
        let moveX = (x * $('.right').width() / $('.mask').width())
        let moveY = (y * $('.right').height() / $('.mask').width())
        $('.right>img').css({
            left: -moveX + 'px',
            top: -moveY + 'px'
        })
    })
}

/**
 * 切换放大镜图片
 *  功能:  选中小图，显示图片和背景图片切换为小图对应图片
 *        1. 给小图片绑定事件
 *            1.1 循环遍历每个小图，设置事件
 *            1.2 事件委托，给它父元素设置事件
 *        2. 选中小图设置选中样式active
 *            设置之前先清掉所有小图选中样式active
 */
function onTabGlass(goods, shangjia){
        $('.cmdPicSmall>li').click(function(){
            // 清除所有小图样式
            $('.cmdPicSmall>li').removeClass('active')
            $(this).addClass('active')
            let index=$(this).attr('data-index')
            $('.showImg').attr('src',`${goods.photo[index].url}`)
            $('.right>img').attr('src',`${goods.photo[index].url}`)
        })
}





/**
 * 回到顶部
 */
 function onBackTop() {
    //首先将#btn隐藏
    $("#backToTopBtn").hide()
    //当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
                $("#backToTopBtn").fadeIn(200)
            } else {
                $("#backToTopBtn").fadeOut(200)
            }
        })
        //当点击跳转链接后，回到页面顶部位置
        $("#backToTopBtn").click(function () {
            $('body,html').animate({
                    scrollTop: 0
                },
                500)
            return false;
        })
    })

}



/**
 * 加入购物车
 */
function addCart(product){
    $('.num').click(function(){
        alert('对不起，此功能还暂未开发~敬请期待！')
    })
    $('.buyNow').click(function(){
    alert('时间真的太少啦~就先不做这一坨了，点击  加入购物车  试试看吧！')
    })
    let goods=product
    let allProduct=localStorage.getItem('CARS')
    allProduct=JSON.parse(allProduct)||[]
    let allList=allProduct.find(item=>{
        return item.id==goods.id
    })
    if(allList){
        allList.num++
    }else{
        allProduct.unshift({
            id:goods.id,
            num:1,
            state:false,
            img:goods.photo[0].url,
            price:goods.price,
            title:goods.title
        })
    }
    localStorage.setItem('CARS',JSON.stringify(allProduct))
    alert('商品成功加入购物车')
    console.log(allList)
    console.log(allProduct)
}

// 功能暂未完成说明
function imperfectFunction(){
    $('.icon-wodedingdan').click(function(){
        alert('该项功能暂未开放')
    })
    $('.icon-wode').click(function(){
        alert('此功能暂未开放')
    })
}





backToIndexOrCart()
loadProduct()
onBackTop()
imperfectFunction()
